<template>
	<view class="navbar">
		<!-- 状态栏 -->
		<view class="navbar__fixed bg-color">

			<view class="statusBar" :style="{height:statusBarHeight+'px'}"></view>
			<view class="navbar__content" :style="{height:statusHeight+'px',width:windowWidth+'px'}">
				<view class="navbar__contentfa" :style="{height:statusHeight+'px'}">
					<view class="backfa" v-if="isSearch" @click="back">
						<text class="iconfont icon-fanhui"></text>
					</view>
					<view class="inputfa bg-white">
						<view class="iconfa">
							<text class="icon-search iconfont"></text>
						</view>
						<view class="navbar__input font-12" v-if="!isSearch" @click="gotoSearch">
							{{placeholder}}
						</view>
						<input v-else type="text" v-model="searchValue" :placeholder="placeholder" class="navbar__input"
							@input="inputChange" />
					</view>
				</view>
			</view>
		</view>
		<view class="" :style="{height:statusBarHeight+statusHeight+'px'}"></view>
	</view>
</template>

<script>
	export default {
		name: "navbar",
		props: {
			isSearch: {
				type: Boolean,
				default: false
			},
			value: {
				type: [String, Number],
				default: ''
			},
		},
		data() {
			return {
				statusBarHeight: 0,
				statusHeight: 45,
				windowWidth: 375,
				searchValue: "",
				placeholder: "搜索一下,你就知道...",
				timer: null
			};
		},
		watch:{
			value(newV){
				this.searchValue = newVal
			}
		},
		created() {
			let info = uni.getSystemInfoSync()
			console.log(info);
			this.windowWidth = info.windowWidth
			//获取状态栏的高度
			this.statusBarHeight = info.statusBarHeight
			//获取胶囊的信息
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			const MenuButtonInfo = uni.getMenuButtonBoundingClientRect()
			console.log(MenuButtonInfo);
			//获取胶囊的位置
			this.MenuHeight = MenuButtonInfo.height
			this.statusHeight = (MenuButtonInfo.top - this.statusBarHeight) * 2 + this.MenuHeight
			this.windowWidth = MenuButtonInfo.left
			console.log(this.statusHeight);
			// #endif
		},
		methods: {
			gotoSearch() {
				uni.navigateTo({
					url: '../../pages/search/search'
				})
			},
			back() {
				uni.navigateBack()
			},
			// inputChange(e){
			// 	if(this.timer){
			// 		clearTimeout(this.timer)
			// 	}
			// 	this.timer = setTimeout(()=>{
			// 		// console.log(this);
			// 		this.$emit("searchValue",e.detail.value)
			// 		this.timer = null
			// 	},500)
			// }	
			// inputChange: debounce(function(e) {
			// 	// console.log(e.detail.value);
			// 	this.$emit("searchValue", e.detail.value)

			// })
			inputChange(e){
				this.$emit("searchValue", e.detail.value)
			}
		}
	}
</script>

<style lang="scss">
	$iconRect:44rpx;

	.navbar {
		.navbar__fixed {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
		}

		.navbar__content {
			display: flex;
			justify-content: center;
			align-items: center;

			.navbar__contentfa {
				width: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;

				.backfa {
					margin-right: 20rpx;

					text {
						color: #fff;
					}
				}

				.inputfa {
					width: 100%;
					height: 60rpx;
					position: relative;
					border-radius: 40rpx;

					.iconfa {
						position: absolute;
						width: $iconRect;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.navbar__input {
						height: 100%;
						padding-left: $iconRect;
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
</style>
